<template>
  <div class="content">
    <div class="left" @click="changeMsg(1)">
      <div class="top_one">
        <div class="btn_Time">
          <button
            @click="timeHandler(0)"
            :class="prev_index == 1 ? 'prev_xuzho' : ''"
          >
            时间范围
          </button>
          <button
            @click="timeHandler(1)"
            :class="prev_index == 2 ? 'prev_xuzho' : ''"
          >
            单一日期
          </button>
        </div>
      </div>
      <div class="bottom_one">
        <!-- 单一日期 -->
        <div class="last" v-show="disFlex">
          <div class="item_last_top">
            <div class="block">
              <span class="demonstration">One date &nbsp;</span>
              <el-date-picker
                :picker-options="pickerBeginDateOne"
                v-model="ruleForm.startDate"
                placeholder="年/月/日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <!-- 单一日期开始时间 -->
            <p class="times">
              Start Time
              <el-time-picker
                placeholder="Start time"
                v-model="ruleForm.startTime"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                :picker-options="{
                  selectableRange: `$00:00:00 - $20:29:59`,
                }"
              >
              </el-time-picker>
            </p>
          </div>
          <p class="commit">
            <el-button
              type="success"
              size="mini"
              round
              @click="dialogVisible1 = true"
            >
              <span>Add data</span>
            </el-button>
          </p>

          <el-dialog
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose"
          >
            <span>您即将添加一条信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="addHandler(ruleForm)"
                >确 定</el-button
              >
            </span>
          </el-dialog>

          <!-- 选择时间以后展示 -->
          <div class="last-one">
            <div class="one">
              <span>Data Selection</span>
              <span @click="clearHandler()">Clear All</span>
            </div>
            <div class="demo-input-size">
              <div class="joinit">
                <ul class="joinit_left">
                  <li class="e6e7e8">
                    {{ this.ruleForm.startDate }}
                    <i class="el-icon-edit" @click="dialogVisible = true"></i>
                    <i class="el-icon-delete" @click="clearHandler()"></i>
                  </li>
                  <li
                    v-for="(item, index) in 7"
                    :key="index"
                    :class="index % 2 == 0 ? 'f1f2f2' : 'e6e7e8'"
                  ></li>
                </ul>
                <div class="joinit_right"></div>
              </div>
            </div>
          </div>
          <!-- 修改弹出对话框 -->
          <el-dialog
            title="修改日期"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <div class="block">
              <span class="demonstration">One date &nbsp;</span>
              <el-date-picker
                :picker-options="pickerBeginDateOne"
                v-model="ruleForm.startDate"
                placeholder="年/月/日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <p class="times">
              Start Time
              <el-time-picker
                placeholder="Start time"
                v-model="ruleForm.startTime"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                :picker-options="{
                  selectableRange: `$00:00:00 - $20:29:59`,
                }"
              >
              </el-time-picker>
            </p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="sureHandle(ruleForm)"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>
        <!-- 时间范围 -->
        <div class="last" v-show="disFlex1">
          <div class="item_last">
            <div class="item_last_top">
              <div class="block">
                <span class="demonstration">Start date &nbsp;</span>
                <el-date-picker
                  :picker-options="pickerBeginDateBefore"
                  v-model="ruleForm.startDate"
                  placeholder="年/月/日"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
              <p class="times">
                <span class="times_span">Time</span>
                <el-time-picker
                  placeholder="Start time"
                  v-model="ruleForm.startTime"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  :picker-options="{
                    selectableRange: `$00:00:00 - $20:29:59`,
                  }"
                >
                </el-time-picker>
              </p>
            </div>
            <div class="item_last_bottom">
              <div class="block">
                <span class="demonstration">End Date &nbsp;</span>
                <el-date-picker
                  :picker-options="pickerBeginDateAfter"
                  v-model="ruleForm.endDate"
                  placeholder="年/月/日"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </div>
              <p class="times">
                <span class="times_span">Time</span>
                <el-time-picker
                  placeholder="End time"
                  v-model="ruleForm.endTime"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  :picker-options="{
                    selectableRange: `$00:00:00 - $20:29:59`,
                    minTime: ruleForm.startTime,
                  }"
                >
                </el-time-picker>
              </p>
            </div>
            <div class="item_last_ratio">
              <div class="block">
                <span class="demonstration">分辨率 &nbsp;</span>
                <el-date-picker
                  :picker-options="pickerBeginDateAfter"
                  v-model="ruleForm.endDate"
                  placeholder="年/月/日"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </div>
              <div class="times">
                <div class="btn_group">
                  <button
                    @click="dayClick"
                    :class="btn_index == 1 ? 'btn_xuzho' : ''"
                  >
                    日
                  </button>
                  <button
                    @click="hourClick"
                    :class="btn_index == 2 ? 'btn_xuzho' : ''"
                  >
                    小时
                  </button>
                  <button
                    @click="minuteClick"
                    :class="btn_index == 3 ? 'btn_xuzho' : ''"
                  >
                    分钟
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 按钮 add -->
          <p class="commit">
            <el-button
              type="success"
              size="mini"
              round
              @click="dialogVisible1 = true"
            >
              <span>Add data</span>
            </el-button>
          </p>

          <el-dialog
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose"
          >
            <span>您即将添加一条信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="surHandler(ruleForm)"
                >确 定</el-button
              >
            </span>
          </el-dialog>

          <!-- 选择时间以后展示 -->
          <div class="last-one">
            <div class="one">
              <span>Data Selection</span>
              <span @click="clearHandler()">Clear All</span>
            </div>
            <div class="demo-input-size">
              <div class="joinit">
                <ul class="joinit_left">
                  <li class="e6e7e8">
                    {{ this.ruleForm.startDate }}>>>{{ this.ruleForm.endDate }}
                    <i class="el-icon-edit" @click="dialogVisible = true"></i>
                    <i class="el-icon-delete" @click="clearHandler()"></i>
                  </li>
                  <li
                    v-for="(item, index) in 7"
                    :key="index"
                    :class="index % 2 == 0 ? 'f1f2f2' : 'e6e7e8'"
                  ></li>
                </ul>
                <div class="joinit_right"></div>
              </div>
            </div>
            <!-- 修改弹出对话框 -->
            <el-dialog
              title="修改日期"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <div>
                <div class="block">
                  <span class="demonstration">Start date &nbsp;</span>
                  <el-date-picker
                    :picker-options="pickerBeginDateBefore"
                    v-model="ruleForm.startDate"
                    placeholder="年/月/日"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
                <p class="times">
                  Start Time
                  <el-time-picker
                    placeholder="Start time"
                    v-model="ruleForm.startTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    :picker-options="{
                      selectableRange: `$00:00:00 - $20:29:59`,
                    }"
                  >
                  </el-time-picker>
                </p>
                <hr />
                <div class="block">
                  <span class="demonstration">End Date &nbsp;</span>
                  <el-date-picker
                    :picker-options="pickerBeginDateAfter"
                    v-model="ruleForm.endDate"
                    placeholder="年/月/日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </div>
                <p class="times">
                  End Time
                  <el-time-picker
                    placeholder="End time"
                    v-model="ruleForm.endTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    :picker-options="{
                      selectableRange: `$00:00:00 - $20:29:59`,
                      minTime: ruleForm.startTime,
                    }"
                  >
                  </el-time-picker>
                </p>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="mayHandler(ruleForm)"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧结束 -->

    <!-- 经纬度一侧 -->
    <div class="right" @click="changeMsg(2)">
      <div class="btn_height">
        <button
          :class="btn_height == 1 ? 'prev_xuzho' : ''"
          @click="btn_height = 1"
        >
          经纬度
        </button>
        <button
          :class="btn_height == 2 ? 'prev_xuzho' : ''"
          @click="(dialogVisibleH = true), (btn_height = 2)"
        >
          高度
        </button>
      </div>
      <div class="jwd_right">
        <div class="item_last_top">
          <div class="block">
            <span class="demonstration">经纬度&nbsp;</span>
            <div class="input_jwd">
              <input type="text" v-model="jwd_model" />
              <button @click="jwd_model = ''">
                <i class="el-icon-close"></i>
              </button>
              <button @click="clearRef">
                <svg
                  t="1664347262206"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="27115"
                  width="16"
                  height="16"
                >
                  <path
                    d="M873.52 65.44A31.89 31.89 0 0 0 864 64H416a288 288 0 0 0-288 288v73.34a224 224 0 0 0 123.82 200.35L280.45 640H160a32 32 0 0 0-32 32v256a32 32 0 0 0 32 32h448a288 288 0 0 0 288-288v-73.34a224 224 0 0 0-123.82-200.35L743.55 384H864a32 32 0 0 0 32-32V96a32 32 0 0 0-22.48-30.56zM416 128h416v64H352a222.38 222.38 0 0 0-122.87 36.64C269.26 168.05 338 128 416 128zM192 425.34V416c0-88.22 71.78-160 160-160h480v64H367.11a111.11 111.11 0 0 0-49.69 210.49L536.45 640h-112.9l-143.1-71.55A159.13 159.13 0 0 1 192 425.34z m220.62-7.25L678 550.76A47.11 47.11 0 0 1 656.89 640h-18.33a51.49 51.49 0 0 0-27.18-34.09L346 473.24A47.11 47.11 0 0 1 367.11 384h18.33a51.49 51.49 0 0 0 27.18 34.09zM608 896H192v-64h480a222.38 222.38 0 0 0 122.87-36.64C754.74 856 686 896 608 896z m224-297.34V608c0 88.22-71.78 160-160 160H192v-64h464.89a111.11 111.11 0 0 0 49.69-210.49L487.56 384h112.89l143.1 71.55A159.13 159.13 0 0 1 832 598.66z"
                    fill="#bcbec0"
                    p-id="27116"
                  ></path>
                </svg>
              </button>
              <button>
                <svg
                  t="1664346681524"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3373"
                  width="20"
                  height="20"
                >
                  <path
                    d="M432.7 621.3h66.8s61.4-1.4 89.5 47.4c21.7 37.5 33.7 74.6 39.2 94.4 6 27.6 15 53.2 23.3 67.6 22.3 38.6 71.7 51.9 110.3 29.6 38.6-22.3 51.9-71.7 29.6-110.3-8.3-14.4-26-35-47-54-14.4-14.7-40.5-43.6-62.2-81.1-28.1-48.9 3.8-101.3 3.8-101.3l33.4-57.8c7.1-15.3 7-33.8-2.1-49.6l-47.9-83-326.5 188.4 47.9 83a53.98 53.98 0 0 0 41.9 26.7z m262.6-177.8L663 499.6c-1.6 2.7-39.8 66.8-4 128.7 22.1 38.2 48.2 68.2 66.3 86.6l0.5 0.6 0.6 0.5c22.2 20.1 36.4 38.2 41.7 47.5 14.8 25.7 6 58.7-19.7 73.5-25.7 14.8-58.7 6-73.5-19.7-5.4-9.3-14-30.6-20.3-59.9l-0.2-0.8-0.2-0.7c-6.9-24.8-19.8-62.4-41.8-100.7-35.7-61.9-110.3-60.9-112.8-60.8h-65.4c-8.5-1.1-15.7-5.8-20-13.2l-7.6-13.1 279.8-161.5 7.6 13.1c4.2 7.3 4.7 16 1.3 23.8z m-35.9-83.6l13.5 23.3-279.8 161.6-13.5-23.3 279.8-161.6zM655.8 299.9l-54.5-94.4c-30.2-50.6-95.5-67.6-146.6-38.1l-23.2 13.4 37.8 68c-51.7-41.5-122.8-16.5-201 26.2l-46.6 26.9 107.7 186.5m139-297.9c38.1-21.9 87.3-9 109.6 28.4l41.1 71.1-69.9 40.4-80.8-139.9z m-129.1 261l-80.8-139.9 23.3-13.5c124.7-78.5 185.3-25.8 242.3 46.6L339.3 451.5z"
                    fill="#bcbec0"
                    p-id="3374"
                  ></path>
                </svg>
              </button>
            </div>
          </div>
          <!-- 单一日期开始时间 -->
          <div class="times">
            <span>分辨率</span>
            <div class="input_jwd">
              <input type="text" />
              <button>
                <svg
                  t="1664325598004"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="28213"
                  width="20"
                  height="20"
                >
                  <path
                    d="M917.284001 297.722752c-5.406127-5.437849-13.06762-8.396227-21.479197-8.396227-9.611915 0-18.953677 3.844561-25.713638 10.543124L511.980046 659.992589 153.873018 299.91672c-6.729262-6.745634-16.072047-10.619872-25.654286-10.619872-8.470929 0-16.131399 2.989077-21.598924 8.457626-12.301164 12.435217-11.32493 33.69031 2.192945 47.312562l376.764969 378.821815c6.758937 6.788613 15.860223 10.723226 25.052582 10.8143l3.425006 0c8.981559-0.301875 17.814738-4.205788 24.423249-10.8143l376.733247-378.852514C928.728658 331.382363 929.690566 310.113967 917.284001 297.722752"
                    p-id="28214"
                    fill="#bcbec0"
                  ></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 高度对话框 -->
      <el-dialog
        title="填写高度"
        :visible.sync="dialogVisibleH"
        width="30%"
        :before-close="handleClose"
      >
        <span>start Altitude</span
        ><input type="text" v-model="ruleForm.startaltitude" placeholder="" />
        <span>end Altitude</span
        ><input type="text" v-model="ruleForm.endaltitude" placeholder="" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleH = false">取 消</el-button>
          <el-button type="primary" @click="heiHandler(ruleForm)"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 经纬度的展示 -->

      <!-- 经纬度修改的对话框 -->
      <el-dialog
        title="修改经纬度"
        :visible.sync="dialogVisibleL"
        width="30%"
        :before-close="handleClose"
      >
        <span>Start Longitude</span
        ><input type="text" v-model="ruleForm.startlongitude" placeholder="" />
        <span>Start Latitude</span
        ><input type="text" v-model="ruleForm.startlatitude" placeholder="" />
        <span>End Longitude</span
        ><input type="text" v-model="ruleForm.endlongitude" placeholder="" />
        <span>End Latitude</span
        ><input type="text" v-model="ruleForm.endlatitude" placeholder="" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleL = false">取 消</el-button>
          <el-button type="primary" @click="weiHandler(ruleForm)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 地图 -->
      <div id="box">
        <!-- <div class="svn"> -->
        <canvas class="canvas" ref="canvas" @click="weizhi"></canvas>
        <div class="seat">
          <div class="top">
            <button @click="bgt_top">
              <i class="el-icon-arrow-up"></i>
            </button>
          </div>
          <div class="center">
            <div>
              <button @click="bgt_left">
                <i class="el-icon-arrow-left"></i>
              </button>
            </div>
            <div>
              <div class="centert_center"></div>
            </div>
            <div>
              <button @click="bgt_right">
                <i class="el-icon-arrow-right"></i>
              </button>
            </div>
          </div>
          <div class="bottom">
            <button @click="bgt_bottom">
              <i class="el-icon-arrow-down"></i>
            </button>
          </div>
        </div>
        <!-- </div> -->
        <div class="latiub">
          W:&nbsp;&nbsp;{{ this.ruleForm.startlongitude }}°&nbsp;&nbsp;
          N:&nbsp;&nbsp;{{ this.ruleForm.startlatitude }}°&nbsp;&nbsp;
          E:&nbsp;&nbsp;{{ this.ruleForm.endlongitude }}°&nbsp;&nbsp;
          S:&nbsp;&nbsp;{{ this.ruleForm.endlatitude }}°&nbsp;&nbsp;
        </div>
        <div class="bottom_km">
          <span>20-100KM</span>
        </div>
      </div>
      <!-- <el-button @click="clearRef" type="primary">清除</el-button> -->
    </div>
  </div>
</template>

<script>
import { oneData } from "../../service/index";
import { getContext2d, drawRect, clearContext } from "../../utils/canvas01(1)";
export default {
  name: "times",
  data() {
    return {
      chaMSg: 1,
      btn_index: 1,
      prev_index: 1,
      btn_height: 1,
      current: 1,
      jwd_model: "",
      lineData: [],
      c2d: null,
      //监听事件鼠标按下
      delFunc: null,
      //监听事件鼠标松开
      delFunc1: null,
      // 兄弟传参
      namevalue: 0,
      //切换单一日期
      disFlex: false,
      //时间范围
      disFlex1: true,
      //初始x,y
      x: 0,
      y: 0,
      s: 0,
      //高度
      dialogVisibleH: false,
      //修改对话框
      dialogVisible: false,
      //add添加对话框
      dialogVisible1: false,
      //修改经纬度对话框
      dialogVisibleL: false,
      //分辨率
      options: [
        {
          value: "10*10",
          label: "10*10",
        },
        {
          value: "20*20",
          label: "20*20",
        },
      ],
      value: "",
      //开始结束表单参数
      ruleForm: {
        endDate: "",
        startDate: "",
        startTime: "",
        endTime: "",
        startlatitude: 0,
        endlatitude: 0,
        startlongitude: 0,
        endlongitude: 0,
        startaltitude: 100,
        endaltitude: 200,
      },
      // 用来保存所有选择的时间数组
      addtime: [],
      //单一日期函数
      pickerBeginDateOne: {
        disabledDate: (time) => {
          const beginDateVal = new Date(this.ruleForm.startDate).getTime();
          if (beginDateVal) {
            return time.getTime() > beginDateVal;
          }
        },
      },
      //开始日期
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          const beginDateVal = new Date(this.ruleForm.endDate).getTime();
          if (beginDateVal) {
            return time.getTime() > beginDateVal;
          }
        },
      },
      //结束日期
      pickerBeginDateAfter: {
        disabledDate: (time) => {
          const beginDateVal = new Date(this.ruleForm.startDate).getTime();
          if (beginDateVal) {
            return time.getTime() <= beginDateVal - 86400000;
          }
        },
      },
    };
  },
  mounted() {
    this.c2d = getContext2d(this.$refs["canvas"]);
    // console.log('mount',this.c2d)
  },
  methods: {
    // 控制父级页面的css
    changeMsg(e) {
      this.$emit("sendToFather", e);
    },
    //切换日期按钮
    timeHandler(prev) {
      if (prev == 0) {
        this.disFlex1 = true;
        this.disFlex = false;
        this.prev_index = 1;
      } else {
        this.disFlex1 = false;
        this.disFlex = true;
        this.prev_index = 2;
      }
    },
    //clear全部清楚
    clearHandler() {
      this.$confirm("您确定要删除吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({ type: "success", message: "已删除" });
          this.ruleForm.startDate = "";
          this.ruleForm.endDate = "";
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消" });
        });
    },
    //修改对话框函数
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //单一日期修改确定按钮
    sureHandler(prev) {
      //  console.log(prev)
      this.dialogVisible = false;
    },
    //时间范围修改确定
    mayHandler(prev) {
      // console.log(prev, 111);
      this.dialogVisible = false;
    },
    //单一日期add函数
    addHandler(prev) {
      oneData(prev).then((res) => {
        this.namevalue = res.data.data;
        this.$bus.$emit("name", this.namevalue);
      });
      this.dialogVisible1 = false;
    },
    //点击日触发的函数
    dayClick() {
      this.btn_index = 1;
    },
    // 点击小时触发的函数
    hourClick() {
      this.btn_index = 2;
    },
    // 点击分钟 触发的函数
    minuteClick() {
      this.btn_index = 3;
    },
    //日期范围add函数
    surHandler(prev) {
      oneData(prev).then((res) => {
        this.namevalue = res.data.data;
        this.$bus.$emit("name", this.namevalue);
      });
      this.dialogVisible1 = false;
    },
    //单一日期
    adeHandler(prev) {
      this.dialogVisible1 = false;
    },
    //高度
    heiHandler(prev) {
      this.dialogVisibleH = false;
    },
    //纬度修改
    weiHandler(prev) {
      this.dialogVisibleL = false;
    },
    //经纬度的删除
    wdelHandler() {
      this.$confirm("您确定要删除吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({ type: "success", message: "已删除" });
          this.ruleForm.startlongitude = 0;
          this.ruleForm.startlatitude = 0;
          this.ruleForm.endlongitude = 0;
          this.ruleForm.endlatitude = 0;
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消" });
        });
    },
    // 图片点击
    weizhi(e) {
      // var _this = this;
      let box = this.$refs.canvas;
      console.log(e);
      this.s++;
      if (this.s === 1) {
        this.$message("您已选中地图区域");
        box.addEventListener("mousedown", (e) => {
          console.log(e);
          console.log("在canvas上鼠标按下了");
          this.jwd_model = "";
          if (this.current === 1) {
            let wzX = Math.round((e.offsetX / 865) * 300);
            let wzY = Math.round((e.offsetY / 480) * 190);
            this.jwd_model += `start X:${e.offsetX},Y:${e.offsetX} `;
            this.lineData = [];
            this.lineData.push(wzX, wzY);

            this.ruleForm.startlatitude = wzX;
            this.ruleForm.startlongitude = wzY;
            let cvs = document.querySelector("canvas");
            this.c2d = getContext2d(cvs);
            this.current++;
          }
        });
        box.addEventListener("mouseup", (e) => {
          console.log(e);
          console.log("鼠标释放了");
          if (this.current === 2) {
            let wzX = Math.round((e.offsetX / 865) * 300);
            let wzY = Math.round((e.offsetY / 480) * 190);
            this.jwd_model += `end X${e.offsetX},Y${e.offsetY}`;
            this.ruleForm.endlatitude = wzX;
            this.ruleForm.endlongitude = wzY;
            this.lineData.push(wzX, wzY);
            this.lineData[2] -= this.lineData[0];
            this.lineData[3] -= this.lineData[1];
            console.log("lineData", this.lineData);
            console.log("c2d", this.c2d);
            drawRect(this.c2d, this.lineData, "#ff0000", 2);
            this.current--;
          }
        });
      }
    },
    //控制背景上右下左位置
    // 上
    bgt_top() {
      console.log("上")
    },
    // 右
    bgt_right() {
      console.log("右");
    },
    // 下
    bgt_bottom() {
      console.log("下");
    },
    // 左
    bgt_left() {
      console.log("左");
    },
    clearRef() {
      clearContext(this.$refs["canvas"], this.c2d);
      (this.ruleForm.startlongitude = 0), (this.ruleForm.startlatitude = 0);
      (this.ruleForm.endlatitude = 0), (this.ruleForm.endlongitude = 0);
    },
  },
};
</script>

<style scoped lang="scss">
.input_jwd {
  display: flex;
  border-radius: 4px;
  width: 320px;
  input {
    width: 200px;
    background-color: #fff;
    border: 1px solid #3d465b;
    border-right: none;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  button {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #fff;
    border: none;
    color: #bcbec0;
    text-align: center;
    box-sizing: border-box;
  }
  :nth-child(2) {
    border: 1px solid #3d465b;
    border-left: none;
    border-right: none;
    line-height: 30px;
  }
  :nth-child(3) {
    background: #3d465b;
    line-height: 45px;
  }
  :nth-child(4) {
    background: #3d465b;
    line-height: 50px;
    border-radius: 0 4px 4px 0;
  }
}
.times {
  .input_jwd {
    button {
    }
    :nth-child(2) {
      background: #3d465b;
      line-height: 50px;
      border-radius: 0 4px 4px 0;
    }
  }
}
.content {
  width: 100%;
}

.left {
  width: 50%;
  height: 100%;
  float: left;
  .el-date-editor.el-input {
    width: 300px;
  }
  .top_one {
    margin-left: 120px;
    margin-right: 40px;
    display: flex;
    justify-content: center;
    .btn_Time {
      display: flex;
      justify-content: flex-end;
      button {
        width: 120px;
        height: 40px;
        font-size: 16px;
        color: #fff;
        background: #3d465b;
        border: 1px solid #bcdec0;
      }
      .prev_xuzho {
        background: #1c75bc;
        color: #fff;
      }
    }
  }
  .bottom_one {
    // width: auto;
    margin-left: 120px;
    margin-right: 40px;
    display: flex;
    .item_last_top {
      margin-top: 20px;
      display: flex;
      .block {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .times {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .times_span {
          padding: 0 20px;
        }
      }
    }
    .item_last_bottom {
      margin-top: 20px;
      display: flex;
      .block {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .times {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .times_span {
          padding: 0 20px;
        }
      }
    }
    .item_last_ratio {
      margin-top: 20px;
      display: flex;
      .block {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .times {
        .btn_group {
          display: flex;
          justify-content: flex-end;
          button {
            width: 120px;
            height: 40px;
            font-size: 16px;
            color: #6d6e71;
            background: #d1d3d4;
            border: 1px solid #bcdec0;
          }
          .btn_xuzho {
            background: #1c75bc;
            color: #d1d3d4;
          }
        }
      }
    }
  }
  .last {
    height: 90%;
    margin-top: 5px;
    flex: 1;
    .item_last {
      display: flex;
      flex-direction: column;
    }
    .times {
      width: 50%;
    }
    .commit {
      display: flex;
      button {
        margin: 30px auto;

        span {
          display: inline-block;
          width: 150px;
        }
      }
    }
    .last-one {
      width: 100%;
      height: 100px;
      .one {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background: #3d465b;
        color: #fff;
        span {
          margin: 10px 25px;
        }
      }
    }
    .joinit {
      display: flex;
      height: 240px;
      border-left: 3px solid gray;
      border-bottom: 3px solid gray;
      border-right: 3px solid gray;
      .joinit_left {
        list-style: none;
        height: 240px;
        flex: 1;
        li {
          height: 30px;
          width: 100%;
          i {
            margin-top: 10px;
            float: right;
            cursor: pointer;
          }
        }
        .f1f2f2 {
          background: #f1f2f2;
        }
        .e6e7e8 {
          background: #e6e7e8;
        }
      }
      .joinit_right {
        height: 240px;
        width: 10px;
        background: #a7a9ac;
      }
    }
  }
}
.right {
  width: 50%;
  height: 100%;
  float: left;
  .btn_height {
    display: flex;
    justify-content: center;
    button {
      width: 120px;
      height: 40px;
      font-size: 16px;
      color: #fff;
      background: #3d465b;
      border: 1px solid #bcdec0;
    }
    .prev_xuzho {
      background: #1c75bc;
      color: #fff;
    }
  }
  .jwd_right {
    margin-left: 20px;
    margin-right: 60px;
    .item_last_top {
      margin-top: 35px;
      display: flex;
      .block {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .el-date-editor.el-input {
          width: 300px;
        }
      }
      .times {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .times_span {
          padding: 0 20px;
        }
        .el-date-editor.el-input {
          width: 300px;
        }
      }
    }
  }
  .last-one {
    width: 100%;
    height: 100px;
    margin-top: 229px;
    .num {
      margin-top: 20px;
      width: 100%;
      height: 40px;
    }
  }

  #box {
    display: flex;
    position: relative;
    flex-direction: column;
    margin-top: 35px;
    margin-left: 20px;
    margin-right: 60px;
    background-image: url("map.jpg");
    border: 3px solid #a7a9ac;
    // width: 360px;
    // height: 180px;
    canvas {
      height: 380px;
      z-index: 100;
    }
    .seat {
      position: absolute;
      right: 20px;
      bottom: 70px;
      width: 80px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      button {
        width: 20px;
        height: 20px;
        border: none;
        background: #3b465b;
        color: #bcbec0;
      }
      .top {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
      }
      .center {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        button {
          flex: 1;
          width: 20px;
          height: 20px;
          text-align: center;
        }
        div {
          flex: 1;
          margin: 0 auto;
          text-align: center;
          .centert_center {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3b465b;
          }
        }
      }
      .bottom {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    // }
    .latiub {
      width: 100%;
      height: 30px;
      z-index: 5;
      background: #3d465b;
      color: #f1f2f2;
      font-size: 16px;
      text-align: center;
      line-height: 30px;
      i {
        float: right;
        margin-top: 10px;
        cursor: pointer;
      }
    }
    .bottom_km {
      width: 100%;
      height: 30px;
      background: #e6e7e8;
      color: #414042;
      text-align: center;
      font-size: 16px;
      line-height: 30px;
    }
  }
}
</style>